<template>
  <div class="home">
    <!-- 面试题:页面出现弹框的时候,弹框后 看见了弹框底层的页面内容,如何解决?? -->
    <transition name="slide">
      <!-- 给首页的内容嵌套一个div 用v-if 通过路径的值来决定是否展示,为了避免即可消失,外加一个<transition name="slide">过渡,来解决立刻消失的问题 -->
      <div v-if="$route.path === '/home'">
        <!-- 首页搜索栏 -->
        <van-search
          shape="round"
          placeholder="请输入搜索关键词"
          disabled
          @click="changeshowshadow"
        />
        <!-- 首页轮播图 -->
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="#1989fa">
          <van-swipe-item v-for="item in banner" :key="item.id">
            <img :src="item.image_url" alt="" width="100%" />
          </van-swipe-item>
        </van-swipe>

        <!-- 图标导航 -->
        <van-grid :column-num="5">
          <van-grid-item
            :icon="item.icon_url"
            :text="item.name"
            v-for="item in channel"
            :key="item.id"
          />
        </van-grid>

        <!-- 品牌制造商 -->
        <div class="brank">
          <div class="brank_title">品牌制造商直供</div>
          <ul>
            <li v-for="item in brandList" :key="item.id" @click="brandClick(item.id)">
              <img :src="item.pic_url" alt="" width="100%" />
              <h4>{{ item.name }}</h4>
              <p>{{ item.floor_price | RMBformat }}</p>
            </li>
          </ul>
        </div>

        <!-- 新品首发 -->
        <div class="newproducts">
          <h4>周一周四·新品首发</h4>
          <ul>
            <li v-for="item in newGoodsList" :key="item.id" @click="goToDetail(item.id)">
              <img :src="item.list_pic_url" alt="" />
              <div>{{ item.name }}</div>
              <section>{{ item.retail_price | RMBformat }}</section>
            </li>
          </ul>
        </div>
        <!-- <Products :newGoodsList="newGoodsList"/> -->

        <!-- 人气推荐 -->
        <div class="recommend">
          <h4>人气推荐</h4>
          <div class="product" v-for="item in hotGoodsList" :key="item.id">
            <div class="box_img">
              <div class="img">
                <a href="#">
                  <img :src="item.list_pic_url" alt="" />
                </a>
              </div>
            </div>
            <div class="box_title">
              <p>{{ item.name }}</p>
              <p>{{ item.goods_brief }}</p>
            </div>
            <div class="box_price">
              {{ item.retail_price | RMBformat }}
            </div>
          </div>
        </div>

        <!-- 专题 -->
        <div class="special">
          <h4>专题精选</h4>
          <van-swipe :loop="false" :width="300" :show-indicators="false">
            <van-swipe-item v-for="item in topicList" :key="item.id">
              <img :src="item.item_pic_url" :width="300" :height="200" alt="" />
              <h2>
                {{ item.title }}
                <span>{{ item.price_info | RMBformat }}</span>
              </h2>
              <p>
                {{ item.subtitle }}
              </p>
            </van-swipe-item>
          </van-swipe>
        </div>

        <!-- 居家 -->
        <div class="athome" v-for="item in categoryList" :key="item.id">
          <h4>{{ item.name }}</h4>
          <ul>
            <li v-for="i in item.goodsList" :key="i.id">
              <img :src="i.list_pic_url" alt="" />
              <div class="content">
                <div class="title">{{ i.name }}</div>
                <div class="price">{{ i.retail_price | RMBformat }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>

    <!-- 黑色遮罩层 -->
    <transition name="van-fade">
      <div class="popup-shadow" v-show="isShowShadow"></div>
    </transition>

    <!-- 搜索弹出框 -->
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import instance from "../request/request"
import { GetHomeData } from "../request/api";
import { mapState, mapMutations } from "vuex";
import Products from "@/components/Products"

export default {
  components: {
    // HelloWorld
    Products
  },
  data() {
    return {
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: [],
    };
  },

  filters: {
    // RMBformat 是过滤器的名字
    RMBformat(RMBformat) {
      // 参数value接收 | 前面的数据
      return "￥" + RMBformat.toFixed(2) + "元";
    },
  },
  computed: {
    ...mapState({
      isShowShadow: (state) => state.showshadow.isShowShadow,
    }),
  },
  methods: {
    // 品牌制造商
    brandClick(id){
      this.$router.push("/brand?id="+id)
    },
    // 新品
    goToDetail(id){
      this.$router.push("/productdetails?id="+id)
    },
    ...mapMutations({
      changeisShowShadow: "showshadow/changeisShowShadow",
    }),
    changeshowshadow() {
      this.$router.push("/home/searchpopup");
      this.changeisShowShadow(true);
    },
  },

  // 这不是路由守卫，只是用来监听父子级关系的路由切换
  // watch:{
  //   $route(to,from){
  //     // console.log("to为:",to);
  //     // console.log("from为:",from);
  //     if(to.path==="/home"){
  //        this.changeisShowShadow(false);
  //     }
  //   }
  // },
  created() {
    GetHomeData().then((res) => {
      //then的res  接收的是响应拦截器中res的值
      // console.log(333);
      console.log(res.data);
      // this.banner = res.data.banner
      let {
        banner,
        channel,
        brandList,
        newGoodsList,
        hotGoodsList,
        topicList,
        categoryList,
      } = res.data; //解构的方法
      this.banner = banner;
      this.channel = channel;
      this.brandList = brandList;
      console.log(this.brandList);
      this.newGoodsList = newGoodsList;
      this.hotGoodsList = hotGoodsList;
      this.topicList = topicList;
      this.categoryList = categoryList;
    });
  },
};
</script>

<style lang="less" scoped>
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 1s;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}

.popup-shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}

.van-grid {
  margin-top: 0.05rem;
}

.brank {
  margin-top: 0.15rem;
  background-color: #fff;
  .brank_title {
    text-align: center;
    font-size: 0.2rem;
    height: 50px;
    line-height: 50px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 49%;
      position: relative;
      // background-color: aqua;
      h4 {
        position: absolute;
        top: 0.1rem;
        left: 0.1rem;
      }
      p {
        position: absolute;
        top: 0.4rem;
        left: 0.1rem;
        color: #8b0000;
      }
    }
  }
}

.newproducts {
  margin-top: 0.15rem;
  background-color: #fff;
  h4 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 0.2rem;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    li {
      width: 49%;
      background: #fff;
      text-align: center;
      margin-bottom: 10px;
      padding-bottom: 10px;
      img {
        width: 100%;
        display: block;
      }
      section {
        margin-top: 5px;
        color: darkred;
      }
    }
  }
}

.recommend {
  margin-top: 0.1rem;
  background-color: #fff;
  h4 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 0.2rem;
  }
  .product {
    height: 104px;
    background-color: #fafafa;
    margin-bottom: 0.1rem;
    padding: 0.08rem 0.16rem;
    .box_img {
      float: left;
      margin-top: 0.05rem;
      margin-right: 0.1rem;
      .img {
        position: relative;
        display: inline-block;
        // border: 1px solid red;
        a {
          img {
            width: 88px;
            height: 88px;
          }
        }
      }
    }
    .box_title {
      // float: right;

      :nth-child(1) {
        max-height: 32px;
        font-weight: 500;
        line-height: 29px;
        font-size: 0.18rem;
        // border: 1px solid gold;
      }
      :nth-child(2) {
        height: 40px;
        max-height: 100px;
        line-height: 40px;
        font-size: 0.12rem;
      }
    }
    .box_price {
      line-height: 20px;
      color: #8d0000;
      font-size: 0.12rem;
    }
  }
}

.special {
  margin-top: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 0 8px;
  h4 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 0.2rem;
  }
  .van-swipe {
    .van-swipe-item {
      // border: 1px solid red;
      margin-right: 0.15rem;
      padding-bottom: 0.1rem;
      h2 {
        line-height: 40px;
        font-size: 16px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 90%;
        span {
          color: darkred;
          font-size: 0.16rem;
        }
      }
      p {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 90%;
      }
    }
  }
}

.athome {
  background-color: #fff;
  padding-top: 0.18rem;
  h4 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 0.2rem;
  }
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      float: left;
      width: 49%;
      margin-bottom: 10px;
      background: #fff;
      img {
        width: 100%;
      }
      .content {
        text-align: center;
        font-size: 0.14rem;
        margin-left: 0.05rem;
        .title {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price {
          line-height: 40px;
          color: #8b0000;
        }
      }
    }
  }
}
</style>
